<template>
	<view class="done">
		<!-- 基本信息 -->
		<view class="top">
			<!-- 基本信息头部 -->
			<view class="top-item-heard">
				<text
					style="display: inline-block; width: 5px;height: 18px;background-color: rgb(74, 115, 255);"></text>
				基本信息
			</view>
			<!-- 基本信息内容 -->
			<view class="top-item">
				<text>计划编号: <text class="font">{{datalist.InspectionNumber}}</text></text>
			</view>
			<view class="top-item">
				<text>项目名称: <text class="font">{{datalist.InspectionName}}</text></text>
			</view>
			<view class="top-item">
				<text>巡检位置: <text class="font">{{datalist.InspectionPosition}}</text></text>
			</view>
			<view class="top-item">
				<text>巡检内容: <text class="font">{{datalist.InspectionContent}}</text></text>
			</view>
			<view class="top-item">
				<text>计划时间: <text style="color: red;">{{datalist.Inspection_start_time}}</text><text class="font"> 至 </text><text
						style="color: red;">{{datalist.Inspection_end_time}}</text></text>
			</view>
		</view>
		<!-- 点检项目 -->
		<view class="center">
			<!-- 点检项目头部 -->
			<view class="center-item-heard">
				<text
					style="display: inline-block; width: 5px;height: 18px;background-color: rgb(74, 115, 255);"></text>
				点检项目
			</view>
			<!-- 点检进度表格 -->
			<table class="center-item">
				<!-- 表格头部 -->
				<thead>
					<td>设备名称</td>
					<td>参数值</td>
				</thead>
				<!-- 表格内容 -->
				<tbody>
					<tr v-for="(item,index) in datalist2">
						<td>{{item.equipment_name}}</td>
						<td v-if="item.qualified">合格</td>
						<td v-else>不合格</td>
					</tr>
				</tbody>
			</table>
		</view>
		<!-- 点检进度 -->
		<view class="bottom">
			<!-- 点检进度头部 -->
			<view class="bottom-item-heard">
				<text
					style="display: inline-block; width: 5px;height: 18px;background-color: rgb(74, 115, 255);"></text>
				点检进度
			</view>
			<!-- 点检步骤条 -->
			<uni-steps :options="list2" active-color="#007AFF" :active="active" direction="column" />
		</view>
	</view>
</template>

<script>
	import {request} from '../../../unit/request.js'
	import moment from 'moment'
	export default {
		data() {
			return {
				// 表格数据
				datalist: {},
				datalist2:{},
				//步骤条数据
				list2: [{
					title: '【已完成】巡检员李四已完成',
					desc: ' 时间：2020-04-19 12：11：22'
				}, {
					title: '【执行中】巡检员李四点击暂存巡检信息',
					desc: ' 时间：2019-11-12 12：11：22'
				}, {
					title: '【已领取】点检员李四已领取',
					desc: ' 时间：2019-11-12 12：11：22'
				}, {
					title: '【巡检任务生成】管理员后台发布巡检任务',
					desc: ' 时间：2019-11-12 12：11：22'
				}]
			}
		},
		methods: {
			async getdesc(id){
				let res = await request({
					url:`http://42.192.15.126:3000/wang/desc?id=${id}`,
				})
				console.log(res.itemInfo)
				this.datalist2 = res.itemInfo
				this.datalist = res.baseInfo
				this.datalist.Inspection_start_time = moment(res.baseInfo.Inspection_start_time).format('MM-DD HH:mm')
				this.datalist.Inspection_end_time = moment(res.baseInfo.Inspection_end_time).format('MM-DD HH:mm')
			},
		},
		onLoad(option) {
			this.getdesc(option.id)
		}
	}
</script>

<style lang="scss">
	html,
	body,
	#app {
		height: 100%;
	}

	uni-page-body {
		height: 100%;
	}

	.done {
		background-color: rgb(244, 246, 249);
		height: 100%;
		padding: 0% 8%;
		display: flex;
		flex-direction: column;

		.top {
			padding-top: 10px;
			flex: 0.9;
			display: flex;
			flex-direction: column;

			.top-item-heard {
				flex: 1;
				color: rgb(74, 115, 255);
				padding-bottom: 10px;

			}

			.top-item {
				flex: 1;
				padding-left: 10px;
				font-weight: 500;
				font-size: 15px;

			}
		}

		.center {
			padding-top: 10px;
			flex: 1.1;
			display: flex;
			flex-direction: column;

			.center-item-heard {
				color: rgb(74, 115, 255);
				padding-bottom: 10px;
			}

			.center-item {
				flex: 1;
				padding-left: 5px;
				font-weight: 500;
				font-size: 15px;

			}
		}

		.bottom {
			padding-top: 10px;
			flex: 2;

			.bottom-item-heard {
				color: rgb(74, 115, 255);
				padding-bottom: 10px;
			}
		}

		.font {
			font-size: 14px;
			color: rgb(179, 180, 199);
		}

		// 点检进度
		.status-btn {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			align-items: center;
			justify-content: center;
			height: 92rpx;
			margin: 30rpx;
			background-color: #007AFF;
		}

		.example-body {
			/* #ifndef APP-NVUE */
			display: block;
			/* #endif */
			padding: 15px;
			flex-direction: row;
		}
	}
</style>
